<template>
    <div class="about-resume">
        <div class="top">
            <van-icon name="arrow-left" @click="goBack" />
            <span v-show="title=='enclosure'">附件简历</span>
            <span v-show="title=='delivered'">已投简历</span>
        </div>
        <div class="content">
            <div class="enclosure" v-show="title=='enclosure'">
                <van-button round @click="clickInput" type="primary" block>上传简历</van-button>
                <div class="resume-item" v-for="(el,i) in resumeList" :key="i">
                    <a ref="link" :href="el.url">
                        <svg t="1677237116661" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2845" width="200" height="200"><path d="M145.621959 0c-44.79888 0-79.998 36.81188-79.998 81.61076v860.77848c0 44.79888 35.19912 81.61076 79.998 81.61076h732.781681a81.969151 81.969151 0 0 0 81.61076-81.61076V324.80468L657.60916 0h-511.987201z" fill="#4BBFEB" p-id="2846"></path><path d="M657.60916 0v233.59416c0 25.59936 17.61236 92.79768 97.61036 92.79768h204.79488L657.60916 0z" fill="#FFFFFF" p-id="2847"></path><path d="M167.20222 638.39684c2.201545-9.087773 5.068673-18.610735 8.626984-28.492088s7.270218-19.9931 11.186921-30.309642 7.756606-20.78668 11.545311-31.436014a365.661258 365.661258 0 0 0 13.055674-46.104447c1.20317-2.611135 2.81593-4.607885 4.863878-5.990251s4.275093-2.099148 6.681433-2.099147c2.201545 0 4.275093 0.358391 6.220644 1.049574s3.660708 1.817555 5.094273 3.379115 2.611135 3.532712 3.455914 5.913452 1.279968 5.247869 1.279968 8.550187c0 3.60951-0.537587 7.705407-1.638359 12.287692-3.891103 10.00935-7.859004 19.788305-11.852504 29.388066s-7.884603 18.994725-11.62211 28.210494-7.244619 18.303542-10.444538 27.288918a324.139097 324.139097 0 0 0-11.314918 39.755806c-0.639984 3.302317-1.228769 6.835029-1.715157 10.572536s-0.742381 7.372616-0.742381 10.879728c0 2.40634 0.153596 4.684683 0.460788 6.835029s0.79358 4.0191 1.510363 5.631859 1.638359 2.841529 2.841529 3.737507 2.687933 1.356766 4.505487 1.356766c3.788705 0 8.447789-1.971151 13.951651-5.913452s11.442914-9.318167 17.842754-16.127597 12.978876-14.745231 19.737107-23.858604 13.337267-18.841129 19.737106-29.260068 12.338892-21.093873 17.842754-32.101598 10.137347-21.861853 13.951651-32.536786c0.895978-1.894353 1.99675-3.123122 3.302318-3.686308s2.995125-0.81918 5.094272-0.819179c3.891103 0 7.167821 1.177571 9.830155 3.532711s3.967901 5.375866 3.967901 9.062174c0 0.895978-0.102397 1.740756-0.307193 2.559936s-0.511987 1.740756-0.895977 2.841529l-2.099148 6.143846c-1.61276 4.710282-3.123122 9.036574-4.582285 12.978876s-2.636734 7.679808-3.532712 11.18692c-1.305567 4.991875-2.355141 9.574161-3.148721 13.721257s-1.433564 8.038199-1.868754 11.698907-0.742381 7.21902-0.895977 10.726132-0.230394 7.039824-0.230394 10.649334c0 1.407965 0.127997 3.455914 0.38399 6.143846s0.614385 5.683058 1.126372 8.934177 1.177571 6.553436 2.022349 9.906952 1.843154 6.425439 2.995125 9.21577 2.508737 5.068673 4.044699 6.835029 3.327917 2.636734 5.324667 2.636734c3.097523 0 6.374241-1.279968 9.830154-3.814304s6.937427-6.041449 10.41894-10.495738 7.014225-9.676558 10.572536-15.666808 6.988625-12.441289 10.342141-19.353117 6.553436-14.054049 9.59976-21.452263 5.862253-14.719632 8.39659-21.964251 4.81268-14.258844 6.758231-20.991475 3.532712-12.927677 4.735882-18.533937c1.100772-5.299068 2.047949-10.444539 2.841529-15.462013l2.40634-15.001225c0.79358-4.991875 1.663958-10.034949 2.636734-15.078023s2.124747-10.214145 3.532711-15.513213c0.511987-1.894353 1.254369-3.839904 2.252744-5.862253s2.227144-3.814305 3.686308-5.478263 3.020724-2.995125 4.735881-4.044699 3.455914-1.58716 5.247869-1.58716c4.505487 0 7.551811 1.228769 9.138972 3.686307s2.40634 6.527837 2.40634 12.236495c0 4.198295-0.38399 9.087773-1.126372 14.694032s-1.689558 11.468513-2.841529 17.61236-2.431939 12.364491-3.814305 18.661933-2.79033 12.262093-4.198295 17.842754c-2.79033 11.391715-6.502237 23.21862-11.110122 35.480713s-9.727757 24.191395-15.385215 35.839104-11.647709 22.629834-17.996351 32.920777-12.722882 19.148321-19.122721 26.546537c-2.201545 2.611135-4.81268 5.247869-7.807805 7.961401s-6.220644 5.145471-9.676558 7.347016-6.937427 4.0191-10.495738 5.478263-6.963026 2.175946-10.265343 2.175946c-6.911827 0-12.671683-2.022349-17.330767-6.067049s-8.447789-9.446164-11.391715-16.204395-5.19667-14.438039-6.758231-23.090622-2.662333-17.58676-3.379116-26.776931c-5.60626 8.294193-10.726132 15.692408-15.385215 22.194645s-9.369366 12.492488-14.182046 17.99635c-3.60951 4.095898-7.654209 8.524587-12.159696 13.286068s-9.266968 9.138972-14.335641 13.20927-10.214145 7.398215-15.513212 10.060548-10.495738 3.967901-15.590011 3.967901c-5.887853 0-10.828529-1.023974-14.77083-3.071923s-7.116622-4.863878-9.522962-8.473388-4.121497-7.859004-5.171071-12.748481-1.58716-10.188545-1.58716-15.897203c0-6.604635 0.537587-13.388465 1.638359-20.40269s2.457539-14.054049 4.147096-21.042674zM441.396965 648.124597c1.510362-6.092648 3.814305-12.569286 6.963026-19.429914s7.270218-13.772456 12.364491-20.786681 11.21252-13.849254 18.38034-20.556286 15.436414-12.953276 24.83138-18.738731c1.510362-0.895978 3.788705-1.868753 6.911827-2.918327s6.297443-1.663958 9.59976-1.868754c3.891103-4.198295 9.138972-6.297443 15.743606-6.297442 7.807805 0 14.38684 1.971151 19.737107 5.913452s9.778956 9.318167 13.286068 16.127597c1.100772 2.201545 2.124747 4.351891 3.071923 6.451038s1.740756 4.326292 2.40634 6.681433 1.177571 4.863878 1.58716 7.577411 0.588785 5.759856 0.588785 9.138972c0 7.910202-1.254369 15.948401-3.737506 24.140196s-6.041449 16.204395-10.649334 24.0122-10.162946 15.282818-16.716382 22.425039-13.823654 13.567661-21.836254 19.276318c-5.401465 3.891103-11.366116 6.937427-17.919552 9.062174s-13.874853 3.225519-21.964251 3.225519c-7.705407 0-14.38684-1.023974-20.0187-3.071923s-10.342141-4.966276-14.105247-8.780581-6.553436-8.345391-8.39659-13.644459-2.764731-11.21252-2.764731-17.689157a81.508362 81.508362 0 0 1 2.636734-20.249094z m24.908177 1.971151a53.169871 53.169871 0 0 0-1.663958 12.441289c0 3.302317 0.435189 6.374241 1.279968 9.215769a18.38034 18.38034 0 0 0 11.238119 12.159696c2.841529 1.151971 6.323042 1.715157 10.41894 1.715157 7.60301 0 14.668433-1.919952 21.221869-5.785455s12.364491-8.678183 17.484363-14.463638 9.369366-12.031699 12.825279-18.661934 5.862253-12.774081 7.270219-18.38034c0.895978-3.507112 1.663958-6.80943 2.329541-9.906953s0.972776-5.939052 0.972776-8.550186-0.486388-5.017475-1.433564-7.270218-2.175946-4.78708-3.686308-7.577411c-0.895978-1.689558-1.791955-3.481513-2.687933-5.324667s-1.689558-3.686308-2.40634-5.478263c-0.79358 1.407965-1.638359 2.636734-2.559936 3.686308s-2.252744 1.99675-4.044699 2.841529-4.249494 1.61276-7.347016 2.329542-7.142221 1.305567-12.159696 1.791955c-3.302317 1.100772-6.655834 2.79033-10.060548 5.094273s-6.732632 4.991875-9.983751 8.089397a109.20687 109.20687 0 0 0-17.253968 21.093873c-2.355141 3.763106-4.40309 7.423814-6.143847 11.033324s-2.918327 6.886228-3.60951 9.906953zM605.335267 690.133147c1.305567-6.988625 2.79033-14.694033 4.505487-23.090623l5.247869-25.496963c1.791955-8.601385 3.558311-17.049174 5.247869-25.343366s3.148721-15.897203 4.351891-22.80903c-0.102397-0.998375-0.153596-1.868753-0.153596-2.636734v-2.483138a75.492513 75.492513 0 0 1 2.227144-17.842754c1.100772-3.788705 2.329542-6.374241 3.686308-7.731006s3.532712-2.022349 6.527837-2.02235c2.892728 0 5.222269 0.563186 6.963026 1.715157s3.123122 2.662333 4.121496 4.582286 1.638359 4.070298 1.945552 6.527836a60.849679 60.849679 0 0 1 0.307192 12.236495 67.326317 67.326317 0 0 0-0.127997 4.044698c2.79033-2.892728 5.785455-5.862253 8.934177-8.934176s6.502237-5.811055 10.060548-8.242994 7.295818-4.479888 11.23812-6.067048 8.063798-2.40634 12.36449-2.40634c1.689558 0 3.379116 0.153596 5.017475 0.460788s3.327917 0.691183 5.017475 1.20317c1.99675 0.511987 4.070298 1.177571 6.220644 2.02235s4.223894 2.022349 6.220645 3.532711c3.302317 2.508737 6.067048 5.631859 8.319792 9.369366s3.379116 7.577411 3.379115 11.468513a18.252344 18.252344 0 0 1-3.379115 9.676558c-1.049574 1.459164-2.278343 2.662333-3.686308 3.60951s-2.943926 1.433564-4.659084 1.433564-3.763106-0.435189-6.220644-1.279968-4.479888-1.971151-6.067049-3.379115c-0.691183-0.588785-1.433564-1.459164-2.175945-2.559936s-1.459164-2.201545-2.099148-3.302318l-1.791955-3.071923a8.754981 8.754981 0 0 0-1.279968-1.868753 14.847629 14.847629 0 0 0-3.276718-0.307193c-5.094273 0-9.958151 1.305567-14.540437 3.891103s-8.908577 5.785455-12.902077 9.522962-7.679808 7.756606-11.033324 12.0061-6.271843 8.063798-8.780581 11.468513c-1.99675 8.089398-4.223894 16.716382-6.681433 25.880953s-4.863878 18.713132-7.270218 28.722482v3.737507c0 2.995125-0.102397 6.041449-0.307192 9.138971s-0.79358 5.862253-1.791955 8.242994c-1.100772 1.510362-2.662333 2.764731-4.735882 3.814305s-4.428689 1.58716-7.116622 1.58716c-4.198295 0-7.347016-1.382365-9.446164-4.121497s-3.148721-5.964651-3.148721-9.676558a21.298668 21.298668 0 0 1 0.767981-5.222269zM731.488913 654.140446c1.305567-5.401465 3.020724-10.80293 5.171071-16.204394a109.078873 109.078873 0 0 1 34.866328-46.02765c3.9935-3.19992 8.217395-6.220644 12.671683-9.062173s8.985375-5.324667 13.567661-7.423815 9.21577-3.763106 13.874853-5.017474 9.21577-1.868753 13.721257-1.868753a37.682258 37.682258 0 0 1 16.050799 3.148721l8.012599-28.210495c4.326292-15.308417 9.676558-36.607085 15.974001-63.896002 1.100772-2.687933 2.662333-4.940676 4.659084-6.758232s4.40309-2.687933 7.19342-2.687932c1.99675 0 3.942301 0.179196 5.862253 0.537586s3.60951 1.049574 5.094273 2.099148 2.687933 2.483138 3.60951 4.275093 1.356766 4.147096 1.356766 7.039824l-30.156046 120.444989c-0.895978 3.404715-1.740756 7.987-2.559936 13.721257s-1.561561 11.826904-2.252744 18.226744-1.254369 12.722882-1.638359 18.969126-0.588785 11.622109-0.588785 16.127597c0 5.60626-0.639984 11.161321-1.945552 16.639584-0.588785 2.40634-1.228769 4.428689-1.868753 6.067048s-1.535962 2.995125-2.636734 4.044699-2.483138 1.791955-4.121497 2.252744-3.737507 0.665583-6.220645 0.665583c-2.892728 0-5.145471-0.307192-6.758231-0.895978s-2.79033-1.433564-3.609509-2.483138-1.279968-2.252744-1.433565-3.609509-0.255994-2.79033-0.307192-4.351892-0.153596-3.148721-0.307192-4.812679-0.563186-3.225519-1.279968-4.735882c-1.20317 0.79358-2.841529 1.843154-4.940677 3.148721l-6.37424 3.967901c-2.150346 1.331167-4.172696 2.611135-6.067049 3.737507l-4.198295 2.483138c-2.303942 1.305567-4.889478 2.662333-7.807805 4.121497s-6.01585 2.79033-9.369365 4.044699-6.860628 2.278343-10.495738 3.071923-7.321417 1.20317-11.033324 1.20317c-4.505487 0-8.882978-0.742381-13.132472-2.252744a32.434389 32.434389 0 0 1-19.404315-18.687533 42.930127 42.930127 0 0 1-2.995125-16.716382c0-2.303942 0.127997-4.582285 0.383991-6.835029s0.742381-4.710282 1.433564-7.500613z m25.957751-1.203169c-0.79358 2.995125-1.20317 5.887853-1.20317 8.703782 0 2.892728 0.255994 5.631859 0.742381 8.166196s1.433564 4.78708 2.764731 6.681433 3.148721 3.430314 5.401465 4.582285 5.171071 1.715157 8.780581 1.715157c1.99675 0 4.147096-0.358391 6.451038-1.049573s4.582285-1.58716 6.83503-2.636734 4.351891-2.150346 6.297442-3.302318a151.394615 151.394615 0 0 0 15.59001-10.418939c3.251119-2.40634 6.169446-4.991875 8.780581-7.807805s4.863878-5.913452 6.835029-9.369366 3.532712-7.423814 4.735882-11.929302c0.998375-3.9935 1.868753-7.654209 2.636734-10.956526s1.433564-6.527837 2.022349-9.676558 1.151971-6.374241 1.638359-9.676558 0.998375-6.937427 1.510362-10.956526c-0.511987-0.588785-1.177571-1.177571-2.022349-1.715157s-2.124747-0.81918-3.814305-0.81918c-3.9935 0-8.39659 0.665583-13.209269 2.02235s-9.727757 3.276718-14.770831 5.785455-10.00935 5.555061-14.847629 9.138972-9.343766 7.628609-13.490863 12.082897-7.782205 9.318167-10.879728 14.617235-5.375866 10.905327-6.78383 16.81878z" fill="#FFFFFF" p-id="2848"></path></svg>
                        <span>{{ el.name }}</span>
                        
                    </a>
                    <van-icon name="close" @click.prevent="del(i)"/>
                </div>
                <input type="file" class="upload" ref="upload" @change="upload">
            </div>
            <div class="delivered" v-show="title=='delivered'">
                <h3>暂无已投简历</h3>
            </div>
        </div>
    </div>
</template>

<script>

export default{
    methods:{
        goBack(){
            this.$router.go(-1)

        },
        clickInput(){
            this.$refs.upload.click()
        },
        upload(){
            let data = this.$refs.upload.files[0];
            console.log(data);
            let oReader = new FileReader();    // 实例化FileReader对象
            oReader.readAsDataURL(data);	// 读取文件
            oReader.onload = (ev)=>{
                // 获取到FileReader读取文件的base64
                let base64 = ev.currentTarget.result;
                // console.log(base64);
                this.resumeList = [{
                    name: data.name,
                    url:base64
                },...this.resumeList]
            }
            console.log(this.resumeList);
        },
        del(index){
            console.log(index);
            this.resumeList.splice(index,1)
        }
    },
    computed:{
        title(){
            return this.$route.params.type
        }
    },
    data(){
        return{
            resumeList:[]
        }
    }
    
}
</script>

<style lang="scss" scoped>
.about-resume{
    background-color: var(--bg);
    .top{
        color: #fff;
        width: 100%;
        font-size: 36px;
        background-color: var(--nav-active);
        height: 98px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        .van-icon{
            position: absolute;
            left: 30px;
        }
    }
    .content{
        margin-top: 128px;
        padding: 0 30px 0;
        height: 100%;
        .enclosure{
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            .resume-item{
                width: 80%;
                margin-bottom: 20px;
                display: flex;
                .icon{
                    width: 50px;
                    height: 50px;
                }
                a{
                    display: flex;
                    width: 100%;
                    align-items: center;
                    font-size: 30px;
                    color: var(--title);
                    span{
                        flex: 1;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        margin-left: 10px;
                    }
                    
                }
                .van-icon{
                        font-size: 30px;
                        justify-self: end;
                    }
            }
            .van-button{
                height: 60px;
                width: 50%;
                position: fixed;
                bottom: 50px;
            }
            .upload{
                display: none;
            }
        }
        .delivered{
            text-align: center;
        }
    }
}
</style>